<template>
  <div>
    <div class="box">
      <h1>this is demo h1</h1>
      <div class="btn">
        <a-button type="primary" @click="click"> 提交数据</a-button>
      </div>
      <a-form :form="editForm" layout="inline">
<!--        使用v-model时，是以input事件从子组件抛出value值-->
                <a-form-item label="v-model形式的绑定的 日期">
                  <date-string-picker
                    v-model="editForm.date"
                    :trigger-change="false">
                  </date-string-picker>
                </a-form-item>

        <!--        在需要校验的情况下，在表单中使用v-decorator的形式绑定，
        同时自组件要以change的形式将value抛出到上层副组件-->
        <!--        <a-form-item label="v-decorator形式绑定的 日期">-->
        <!--          <date-string-picker-->
        <!--            v-decorator="['date',{initialValue:''}]"-->
        <!--            :trigger-change="true">-->
        <!--          </date-string-picker>-->
        <!--        </a-form-item>-->
      </a-form>
    </div>
  </div>
</template>

<script>
import dateStringPicker from '@/component/dateStringPicker'

export default {
  name: 'demo',
  components: {
    dateStringPicker
  },
  data () {
    return {
      // 使用v-decorator要使用下面方法注册form表单
      // editForm: this.$form.createForm(this)

      // v-model的形式，form表单注册则比较简单
      editForm: {
        date: ''
      }
    }
  },
  methods: {
    click () {
      console.log('点击按钮')
      // console.log(this.editForm)
      this.editForm.validateFields((err, value) => {
        console.log(err)
        console.log(value)
      })
    }
  }
}
</script>

<style scoped lang="less">
.box {
  margin: 30px 30px;
}

.btn {
  margin: 30px 30px;
}
</style>
